import './TouchableOpacity.less'
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {is,fromJS} from 'immutable'

export default class TouchableOpacity extends Component{
  static propTypes = {
    clickCallBack:PropTypes.func,
    text:PropTypes.string,
    className:PropTypes.string
  }
  constructor(props){
    super(props)
    this.state={
      text : ''
    }
    //this.refBtn = React.createRef();
  }
  
  handleTouchEnd(){
    this.refs.btn.style.opacity='1'
    //this.props.text = 'OK'
  }

  handleTouchStart(){
    this.refs.btn.style.opacity='0.3'
    this.props.clickCallBack();
  }
 
  shouldComponentUpdate(nextProps,nextState){
    return !is(fromJS(this.props),fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
    //return true;
  }
  render(){
    return(
      <div className={`btn-con ${this.props.className}`} onTouchStart={this.handleTouchStart.bind(this)} onTouchEnd={this.handleTouchEnd.bind(this)} 
      ref='btn' >
        {this.props.text || '确认'}
      </div>
    )
  }
}
